<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编辑器演示</title>
    <script src="images/jquery-2.1.1.min.js"></script>
    <script src="images/jquery.mloading.js"></script>
    <script src="images/message.js"></script>
    <link rel="stylesheet" href="images/jquery.mloading.css">


</head>

<body>
<script src='tinymce.min.js'></script>
<script>
    tinymce.init({
        selector: '#title',
        menubar: false,
        inline: true,
        plugins: [
            'lists',
            'autolink'
        ],
        toolbar: 'undo redo | bold italic underline forecolor',
        valid_elements: 'strong,em,span[style],a[href]',
        valid_styles: {
            '*': 'font-size,font-family,color,text-decoration,text-align'
        }
    });
    tinymce.init({
        selector: '#content',
        language: 'zh_CN',//界面语言
        /*
        mobile: {//移动端配置
            menubar: true
        },
        */
        plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help  autosave indent2em autoresize formatpainter axupimgs importword docconver letterspacing powerpaste attachment layout upfile bdmap html noneditable quickbars',
        toolbar: 'html fullscreen undo redo restoredraft | selectall cut copy paste pastetext formatpainter searchreplace layout | fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough | anchor link unlink | formatselect alignleft aligncenter alignright alignjustify outdent indent | indent2em lineheight letterspacing  |\
                     bullist numlist | blockquote subscript superscript removeformat | \
                     charmap hr insertdatetime |  table image quickimage axupimgs attachment upfile media bdmap | docconver importword template | print preview help',
        fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
        font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;隶书=LiSu;楷体=KaiTi;黑体=SimHei,sans-serif;幼圆=YouYuan;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats',
        //width: 860, //编辑器高度
        min_height: 600, //编辑器最小高度
        resize: true, //调整编辑器
        menubar: false, //是否显示菜单
        content_css: [ //可设置编辑区内容展示的css，谨慎使用
            'images/custom.css'
        ],
        quickbars_insert_toolbar: false, //禁用插入快捷菜单 需引入quickbars插件
        quickbars_selection_toolbar:false,//禁用选择快捷菜单 需引入quickbars插件
        noneditable_noneditable_class: 'mceNonEditable', //不可编辑的样式 需启用noneditable插件
        //readonly:true, //只读模式
        placeholder: '　在这里输入内容', //内容占位符
        toolbar_sticky: true, //将工具栏和菜单停靠在屏幕顶部
        toolbar_mode: 'wrap', //工具栏显示格式
        //content_security_policy: "script-src *;", //保留style script标签
        allow_script_urls: true,//允许链接和图像url使用js
        extended_valid_elements: 'script[src|async|defer|type|charset],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],style[type],link[rel|href],iframe[src|style|width|height|scrolling|marginwidth|marginheight|frameborder],a[onclick|href|style|ref|target]', //允许的元素
        forced_root_block: false,//强制根节点块元素
        keep_styles: false, //回车使用当前文档样式
        paste_block_drop: true, //禁止拖拽
        //automatic_uploads: false, //启用或禁用由数据 URL 或 blob URI 表示的图像的自动上传
        paste_webkit_styles: true, //允许粘贴样式
        paste_data_images: true, //粘贴data格式的图像

        powerpaste_word_import: 'merge', // 参数可以是propmt, merge, clear
        powerpaste_html_import: 'merge', // propmt, merge, clear
        powerpaste_allow_local_images: true,//允许带图片


        /* urlconverter_callback: function(url, node, onSave, name)  {
            if (node === 'img' && url.startsWith('blob:')) {
                console.log('urlConverter:', url, node, onSave, name)
                tinymce.activeEditor && tinymce.activeEditor.uploadImages()
            }
            return url
        },*/
        relative_urls:true,//图片、文件上传使用相对/绝对路径
        images_file_types: 'jpeg,jpg,png,gif',
        valid_children: '+div[style],+body[style|link],+p[strong|a|#text]', //有效的子节点
        protect: [
            /<\%.*?\%>/g,  // 保护单行jsp代码
            /<\%[\s\S]*\%>/g  // 保护多行jsp代码
        ],
        //icons:'ax-color', ／／扩展tinymce的默认图标库
        branding: false,//隐藏右下角技术支持
        //importcss_append: true, //如果设置为true，则此选项会将导入的样式附加到“格式”菜单的末尾，并将替换默认格式
        //自定义文件选择器的回调内容
        file_picker_callback: function (callback, value, meta) {
            //文件分类
            var filetype = '.pdf, .txt, .zip, .rar,.doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4,.png,.jpg,.jpeg,.gif';
            //后端接收上传文件的地址
            var upurl = 'editor/uploadFile';
            //为不同插件指定文件类型及后端地址
            switch (meta.filetype) {
                case 'image':
                    filetype = '.jpg, .jpeg, .png, .gif';
                    upurl = 'editor/uploadImage';
                    break;
                case 'media':
                    filetype = '.mp3, .mp4';
                    upurl = 'editor/uploadVideo';
                    break;
                case 'file':
                default:
            }

            //模拟出一个input用于添加本地文件
            var input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.setAttribute('accept', filetype);
            input.click();//兼容IE
            $(input).click(function () {
                this.blur();
                this.focus();
            });
            var i = 0;
            $(input).on("change input", function () {
                i++;
                if (i == 2) return;
                var file = this.files[0];
                var formData;
                formData = new FormData();
                formData.append('file', file, file.name);

                //console.log(file.name);
                $.ajax({
                    url: upurl,
                    type: "post",
                    data: formData,
                    contentType: false,
                    processData: false,
                    beforeSend: function () {
                        $("body").mLoading();
                    },
                    success: function (json) {
                        if (!json || json.stat == 0) {
                            //alert('上传失败: ' + json.msg);
                            tips(json.msg,"error");
                            return;
                        }
                        tips(json.msg,"success");

                        if (meta.filetype === 'file') {
                            callback(json.location, {text: file.name});
                        }
                        if (meta.filetype === 'image') {
                            callback(json.location, {alt: file.name, width: json.width, height: json.height});

                        }
                        if (meta.filetype === 'media') {
                            callback(json.location, {width: 720, height: 480, poster: 'demo.jpg'});
                        }
                    },
                    complete: function () {
                        $("body").mLoading("hide");
                    },
                    error: function (data) {
                        tips('网络连接失败','warning');
                    }
                });
            });
        },
        //为内容模板插件提供预置模板
        templates: [
            {
                title: '署名模板',
                description: '右下角带落款单位',
                content: '<p>替换此处模板内容</p><p style="margin:20px;clear:both;text-align:right;padding-right:40px;">XXXXX公司综合部<br>2021年xx月xx日</p>'
            }
            /*  ,{title: '模板2', description: '介绍文字2', content: '<div class="mceTmpl"><span class="cdate">CDATE</span>，<span class="mdate">MDATE</span>，我的内容</div>'}*/
        ],
        //
        template_cdate_format: '[CDATE: %m/%d/%Y : %H:%M:%S]', //日期模板都将使用的日期格式
        template_mdate_format: '[MDATE: %m/%d/%Y : %H:%M:%S]',
        autosave_ask_before_unload: false, //尝试关闭当前窗口时，编辑器是否应提示用户告知他们尚未保存的更改

        // images_upload_url: '/demo/upimg.php', //指定接收上传图片的后端地址
        //images_upload_base_path: '/demo', //图片地址基本目录
        //图片上传自定义实现
        images_upload_handler: function (blobInfo, succFun, failFun) {
            var formData;
            var file = blobInfo.blob();//转化为易于理解的file对象
            /*
            alert(Math.floor(file.size/1024))
            if (file.size > 2097152) {
                tips('图片超过2M','warning');
                tinyMCE.activeEditor.execCommand("undo");
                return false;
            }
            */
            formData = new FormData();
            formData.append('file', file, file.name);//此处与源文档不一样

            $.ajax({
                url: 'editor/uploadImage',
                type: "post",
                data: formData,
                contentType: false,
                processData: false,
                beforeSend: function () {
                    $("#editForm").mLoading();
                },
                success: function (json) {

                    if (!json || json.stat == 0) {
                        //alert('上传失败: ' + json.msg);
                        //failFun("11");

                        $(".tox-dialog__busy-spinner").remove();
                        if (window.frames.length == 2) {
                            $(window.frames[1].document).find('#topbar .upall').text('全部上传');
                            $(window.frames[1].document).find('#file_list li.up-now').attr('class', 'up-no');
                        }
                        tinyMCE.activeEditor.execCommand("undo");
                        tips(json.msg,'error');
                        return;
                    }

                    tips(json.msg,'success');

                    succFun(json.location);

                },
                complete: function () {
                    $("#editForm").mLoading("hide");
                },
                error: function (data) {
                    tips('网络连接失败','error');

                }
            });
        },
        image_class_list: [
            {title:'None', value:''},
            //{title: 'Left', value:'alignleft'}, // 图片向左对齐
            {title: 'Center', value: 'aligncenter'}, // 图片居中对齐
            //{title: 'Right', value: 'alignright'} // 图片向右对齐
        ],

        //attachement插件 附件上传 20M
        attachment_max_size: 20971520,
        attachment_style:'.attachment>img{display:inline-block!important;max-width:30px!important;vertical-align: middle}',
        attachment_icons_path: 'plugins/attachment/icons',
        attachment_upload_handler: function (file, succFun, failFun, progressCallback) {
            var data = new FormData();
            data.append("file", file);
            $.ajax({
                type: "post",
                data: data,
                url: 'editor/uploadFile',
                cache: false,
                contentType: false,
                processData: false,
                header:{'Content-Type':'multipart/form-data'},
                dataType: 'json',
                xhr: xhrOnProgress(function (e) {
                    const percent = (e.loaded / e.total * 100 | 0) + '%';//计算百分比

                    progressCallback(percent);
                }),
            }).then(function (data) {
                if ( data.stat== 1) {
                    succFun(data.location);
                } else {
                    tips('上传失败:' + data.msg,'error');
                    failFun('上传失败:' + data.msg);
                }
            }).fail(function (error) {
                tips("上传失败",'error');
                failFun('上传失败:' + error.message)
            });
        },
        /*
        * style : 一键布局默认样式参数【Object】
        * filterTags： 【Array】过滤标签，该数组中的标签，一键布局中将会被忽略（默认忽略 'table','tbody','td','tr'）
        *  tagsStyle： 单独标签样式处理【Object】
        * clearStyle: 【Array】清除样式 ，一键布局后 ，数组中的样式将会清除掉。
        * 配置优先级从低到高： style < filterTags < tagsStyle < clearStyle
        * */
        /*
        layout_options: {
            style: {
                'text-align':'justify',
                'text-indent':'6em',
                'line-height': 1.5
            },
            filterTags:['table>*','tbody'], //'table，'tbody','td','tr' 将会忽略掉 同时 table>*，忽略table 标签 以及所有子标签

            tagsStyle: {
                'table': {
                    'line-height': 3,
                     'text-align': 'center'
                },
                'table,tbody,tr,td': { //支持并集选择
                    'line-height': 2
                },
                 'tr>td,table>tbody': { //支持, 精准定位 通过 ' > '
                    'line-height': 3,
                    'text-align': 'center'
                 }
            },
            clearStyle: ['text-indent']//text-indent 将会被清除掉
        },
        */
        /*upfile插件回调*/
        file_callback: function (file, succFun) {
            // 自定义处理文件操作部分
            var data = new FormData();
            data.append("file", file);
            $.ajax({
                type: "post",
                data: data,
                url: 'editor/uploadFile',
                cache: false,
                contentType: false,
                processData: false,
                header:{'Content-Type':'multipart/form-data'},
                dataType: 'json',
                beforeSend: function () {
                    $("#editForm").mLoading();
                },
                success: function (data) {
                    if ( data.stat== 1) {
                        tips(data.msg,'success');
                        succFun(data.location,{text: data.filename}) //成功回调函数 text 显示的文本
                    } else {
                        tips('上传失败:' + data.msg,'error');

                    }
                },
                complete: function () {
                    $("#editForm").mLoading("hide");
                },
                error: function (data) {
                    tips('网络连接失败','error');

                }
            })

        },
        setup: function (editor) {//初化始开始
            $("body").mLoading();
        },
        init_instance_callback : function(editor) { //初始化结束
            $("body").mLoading("hide");
        }
    });


</script>
<script>

    //HTML源码回调使用
    function _getHtml() {
        var html = tinyMCE.editors['content'].getContent({ source_view: true });
        return html;
    }
    function _setHtml(html) {
        tinyMCE.editors['content'].setContent(html);

    }

    //编辑器html内容
    function getHtml() {
        var html = tinyMCE.editors['content'].getContent({ source_view: true });
        alert(html);
    }
    //编辑器txt内容
    function getTxt() {
        var text = tinyMCE.editors['content'].getContent({'format': 'text'});
        alert(text);
    }
    //替换回车按行符
    var getFormatCode = function (strValue) {
        return strValue.replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, ' ');
    }
    //使用注意扩展String方法一定在页面加载完成后
    window.onload=function () {
        //扩展IE下startsWith兼容问题
        String.prototype.startsWith = function (str) {
            if(str==null||str==""||this.length==0||str.length>this.length)
                return false;
            if(this.substr(0,str.length)==str)
                return true;
            else
                return false;
        }
    }
    //上传附件
    var xhrOnProgress = function (fun) {
        xhrOnProgress.onprogress = fun;
        return function () {
            var xhr = $.ajaxSettings.xhr();
            if (typeof xhrOnProgress.onprogress !== 'function')
                return xhr;
            if (xhrOnProgress.onprogress && xhr.upload) {
                xhr.upload.onprogress = xhrOnProgress.onprogress;
            }
            return xhr;
        }
    }
    function tips(_msg,_type){
        $.message({
            message:_msg,
            showClose:true,
            type:_type
        });
        /*
        tinymce.activeEditor.notificationManager.open({
            text: _msg,
            type: _type,
            timeout: 3000
        });
        */
    }

</script>

<form method="post" style="margin:auto;" id="editForm" target="_blank" action="preview.jsp">
    <div>
        <button type="button" onclick="getHtml()">获取HTML内容</button>
        <button type="button" onclick="getTxt()">获取TXT内容</button>
        <button type="button" onclick="submit()">提交</button>
    </div>
    <div style="display: inline-block;font-size:20px;font-weight: bold;">文档标题：</div><h3 id="title" style="font-size:20px;border-bottom:1px solid #ddd;display: inline-block;font-weight:normal;width:90%">端午至：赋予传统节日更多文化内涵</h3>
    <textarea id="content" name="content">
        <p style="text-indent: 2em; line-height: 2;">又是一年端阳至，绿杨带雨垂垂重，五色新丝缠角粽。近期，人们吃粽子、饮雄黄、插艾草、戴香囊、划龙舟、荡秋千，在丰富多彩的活动中品读传统文化、过好传统佳节。</p>
<p style="text-indent: 2em; line-height: 2;">习俗因传承而深入人心。在浙江云龙镇，10余支龙舟伴随着喜庆锣鼓，在长山江上竞逐争先；在陕西白水县，大街小巷随处可见各式各样的手工香囊；在湖南益阳市，小朋友们在博物馆全身心投入五彩绳的编织中&hellip;&hellip;这些民俗活动不仅丰富了端午的节日内涵，也表达了人们寄情言志、团圆孝亲、强身健体的良好祝愿。</p>
<p style="text-indent: 2em; line-height: 2;">文化因赓续而繁荣兴盛。中国文化恰似长河，昼夜奔腾、源远流长。作为率先入选世界非物质文化遗产的中国传统节日，端午节承载着多样且厚重的传统文化，需要进一步挖掘。除了参与体验端午节日的仪式感，更重要的是，要讲好传统节日故事。一些地方通过开展端午诗会、专题展览、读书分享会等活动，借助动漫、情景剧、微纪录片等形式，培植爱国情怀，培育天人合一的自然观、除秽驱病的健康观，已成为传承发扬传统节日文化精髓的创新途径。可以说，这些深具文化内涵的活动与形式，赋予中华民族传统节日以文化魅力，并以潜移默化的方式，将中华民族的精神操守、道德力量根植人心。</p>
<p style="text-align: center; line-height: 2;" class="mceNonEditable">
        <img src="upload/efd74d08-013f-42c4-9c61-507cfba25444.jpg" border="0" />
 </p>
<p style="text-indent: 2em; line-height: 2;">今年端午节之际，很多更具时代感的活动受到了人们的欢迎。不久前，&ldquo;天问一号&rdquo;着陆火星，回答了屈原2000多年前发出的&ldquo;天问&rdquo;，一些地方开设相关航天展引来游人如织；抗击新冠肺炎疫情斗争中，一些地方开展健康讲座、中医体验活动，中草药香包备受欢迎；端午节也是厚植家国情怀的契机，今年适逢中国共产党百年华诞，一些地方组织红色文艺演出、走访慰问老党员老英模，让更多人知史爱党、知史爱国&hellip;&hellip;新形式、新样态为传统节日赋予新的活力，那些记录时代、表达真情、充满创意的活动，也成为传统文化创造性转化、创新性发展的有益尝试。</p>
<p style="text-indent: 2em; line-height: 2;">今天，端午节带给我们的不只是厚重的历史文化，还塑造着影响至深的文化自信。习近平总书记强调：&ldquo;中华优秀传统文化是中华民族的精神命脉，是涵养社会主义核心价值观的重要源泉，也是我们在世界文化激荡中站稳脚跟的坚实根基。&rdquo;放眼中国传统节日，无不凝聚着民族发展的历史，荟萃着人文理念的精华，传承着传统美德的基因，凝聚着发展奋进的力量。人们对传统节日的青睐，正是对优秀传统文化的认可，也是文化自信的体现。不忘历史才能开辟未来，善于继承才能善于创新。传承好、弘扬好中华优秀传统文化，就能在全面建设社会主义现代化国家新征程上，思接千古积蓄前行的力量。</p>
<p style="text-indent: 2em; line-height: 2;">当人们在山水游中品味风俗，在分享美食中感受亲情，在舞龙舞狮等旅游项目中体验非遗，本身就是与传统文化的亲密接触。推动更多传统文化创新发展，传统节日必将更好融入现代生活，为人们提供更多心灵滋养与精神力量。</p>
    </textarea>
</form>
<script>
    function submit() {
        document.getElementById("title").value=tinyMCE.editors['title'].getContent();
        document.getElementById("content").value = tinyMCE.editors['content'].getContent();
        document.forms[0].submit();
    }
</script>

</body>

</html>